<template>
    <div class="tile-file">
        <img class="icon" :src="'data:image/png;base64,' + iconBase64" @click="() => openFile(entrie.path)">

        <div class="chip">
            {{ entrie.name?.substring(0, entrie.name.indexOf('.')) }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { FileEntry } from '@tauri-apps/api/fs';
import { invoke } from "@tauri-apps/api/tauri";

defineProps<{
    entrie: FileEntry,
    iconBase64?: string
}>()

const openFile = async (path: string) => {
    await invoke("open_application", { path: path });
}



</script>

<style scoped>
.tile-file {
    margin: 0.2rem;
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    flex-direction: column;
    text-align: center;
    border-radius: 1rem;
    transition: ease-in-out 0.2s;
    padding: 0.3rem;
}

.tile-file .icon {
    transform: scale(0.7);
    padding: 0 0.8rem 0 0.8rem;
    cursor: pointer;
}

.tile-file .chip {
    align-items: center;
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
}

.tile-file:hover {
    background-color: rgba(255, 255, 255, 0.699);
    transform: scale(1.1);
    box-shadow: 0 0 1rem #fff;
    color: blue;
}
</style>
